<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <meta name="baidu-site-verification" content="code-J1Qg17G6wT" />
  <title>Vuem面试题整理 - 咔斯の小窝</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

    <!-- Site Verification -->
    <meta name="baidu-site-verification" content="code-7bF3wXCwO5" />

  <link rel="shortcut icon" href="https://s2.loli.net/2022/07/19/xKNvsPHqcyCL37d.png" type="image/png" />
  <meta name="description" content="Vue面试题，转载的qwq">
<meta property="og:type" content="article">
<meta property="og:title" content="Vuem面试题整理">
<meta property="og:url" content="https://blog.kassama.top/webNotes-VueInterview.html">
<meta property="og:site_name" content="咔斯の小窝">
<meta property="og:description" content="Vue面试题，转载的qwq">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-02-15T10:47:53.000Z">
<meta property="article:modified_time" content="2022-09-21T15:23:52.380Z">
<meta property="article:author" content="咔斯Sama">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="HTML">
<meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/mdui_043tiny/css/mdui.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/iconfont/iconfont.css,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css?v=233" crossorigin>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css">
  
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_cksn56jaae6.css">
  
  <link rel="stylesheet" href="/css/style.css?v=1695462045614">
<meta name="generator" content="Hexo 6.1.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/bk1.webp)"></div>
    <div class="nexmoe-small" style="background-image: url(https://s2.loli.net/2022/07/19/QDhWb3BqyXLcdF8.png)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="咔斯Sama" class="mdui-btn mdui-btn-icon"><img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="咔斯Sama">
            <img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama" alt="咔斯Sama">
        </a>
    </div>
    <div class="nexmoe-count">
        <div id="ks-articlesBtn" class="nexmoe-count-item"><span>文章</span>32 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div id="ks-tagsBtn" class="nexmoe-count-item"><span>标签</span>14<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div id="ks-categoriesBtn" class="nexmoe-count-item"><span>分类</span>6<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/photos.html" title="咔斯相册">
            <i class="mdui-list-item-icon nexmoefont icon-tuchong"></i>
            <div class="mdui-list-item-content">
                咔斯相册
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于咔斯">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于咔斯
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  
<!-- 站内搜索 -->

<div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search" >
        <form id="search-form">
            <label><input type="text" id="local-search-input" name="q" results="0" placeholder="站内搜索" class="input form-control" autocomplete="off" autocorrect="off"/></label>
            <!-- 清空/重置搜索框 -->
            <i class="fa fa-times" onclick="resetSearch()"></i>
        </form>
    </div>
    <div id="local-search-result"></div> <!-- 搜索结果区 -->
    <!-- <p class='no-result'></p> 无匹配时显示，注意在 CSS 中设置默认隐藏 -->
</div>


  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="http://wpa.qq.com/msgrd?v=3&uin=1347993953&site=qq&menu=yes" target="_blank" mdui-tooltip="{content: 'QQ'}" style="color: rgb(64, 196, 255);background-color: rgba(64, 196, 255, .1);">
            <i class="nexmoefont icon-QQ"></i>
        </a><a class="mdui-ripple" href="https://steamcommunity.com/id/kasiwuhui/" target="_blank" mdui-tooltip="{content: 'steam'}" style="color: rgb(14, 71, 161);background-color: rgba(14, 71, 161, .15);">
            <i class="nexmoefont icon-steam"></i>
        </a><a class="mdui-ripple" href="mailto:kasiwuhui@vip.qq.com" target="_blank" mdui-tooltip="{content: 'mail'}" style="color: rgb(249,8,8);background-color: rgba(249,8,8,.1);">
            <i class="nexmoefont icon-mail-fill"></i>
        </a><a class="mdui-ripple" href="https://space.bilibili.com/93548600" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/kasisama/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a><a class="mdui-ripple" href="https://gitee.com/kassama" target="_blank" mdui-tooltip="{content: 'gitee'}" style="color: rgb(199, 29, 35);background-color: rgba(199, 29, 35, .15);">
            <i class="nexmoefont icon-mayun"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/HTML/" style="font-size: 20px;">HTML</a> <a href="/tags/Linux/" style="font-size: 12.5px;">Linux</a> <a href="/tags/NodeJs/" style="font-size: 12.5px;">NodeJs</a> <a href="/tags/QWQ/" style="font-size: 10px;">QWQ</a> <a href="/tags/Ubuntu/" style="font-size: 12.5px;">Ubuntu</a> <a href="/tags/Vue/" style="font-size: 15px;">Vue</a> <a href="/tags/web/" style="font-size: 17.5px;">web</a> <a href="/tags/wiki/" style="font-size: 12.5px;">wiki</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%92%94%E6%96%AF/" style="font-size: 10px;">咔斯</a> <a href="/tags/%E5%92%94%E6%96%AF%E5%A8%B1%E4%B9%90/" style="font-size: 10px;">咔斯娱乐</a> <a href="/tags/%E5%AE%A0%E7%89%A9%E5%85%BB%E6%88%90/" style="font-size: 12.5px;">宠物养成</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE/" style="font-size: 10px;">服务条款</a>
    </div>
    
  </div>

  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/web笔记/">web笔记</a>
          <span class="category-list-count">23</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/wiki/">wiki</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/公告/">公告</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/备忘/">备忘</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/日志/">日志</a>
          <span class="category-list-count">4</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/遇坑记录/">遇坑记录</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">20</span></li></ul>
    </div>
  </div>


<style>
.nexmoe-widget .archive-list-count{
	position : absolute;
	right: 15px;
	top:9px;
	color: #DDD;
}
</style>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 咔斯Sama
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a><br/>
        <a href="http://beian.miit.gov.cn" target="_blank"></a><br/>
        
        <div style="font-size: 12px">
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
            本站访客数<a id="busuanzi_value_site_uv"></a>人次
        </div>
        
        
    </div>

</div><!-- .nexmoe-drawer -->

  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
    
        <div class="nexmoe-post-cover" style="padding-bottom: 35.25%;">
            <img data-src="https://tva1.sinaimg.cn/large/006RYYI7ly1h69zd0oacnj31jk0jlabd.jpg" data-sizes="auto" alt="Vuem面试题整理" class="lazyload">
            <h1>Vuem面试题整理</h1>
        </div>
    

        <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2021年02月15日</a>
    <a><i class="nexmoefont icon-areachart"></i>3.3k 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 14 分钟</a>
</div>


        <article>
            <p>Vue面试题，转载的qwq</p>
<span id="more"></span>
<h4 id="一-说几个vue中的指令和它的用法？"><a href="#一-说几个vue中的指令和它的用法？" class="headerlink" title="一. 说几个vue中的指令和它的用法？"></a>一. 说几个vue中的指令和它的用法？</h4><p><code>v-model</code> 双向数据绑定；<br><code>v-for</code> 循环；<br><code>v-if</code>, <code>v-show</code> 显示与隐藏；<br><code>v-bind</code> 动态绑定属性<br><code>v-on</code> 事件绑定；<br><code>v-once</code> 只绑定一次。</p>
<h4 id="二-v-on指令可以同时监听多个函数吗"><a href="#二-v-on指令可以同时监听多个函数吗" class="headerlink" title="二. v-on指令可以同时监听多个函数吗?"></a>二. v-on指令可以同时监听多个函数吗?</h4><p>可以, <code>v-on</code>的事件监听类似于DOM原生api添加事件监听者<code>addEventListener</code><br><code>v-on</code> 可以给一个事件同时绑定多个函数，也可以一次绑定多个事件<br><code>v-bind</code> 可以一次绑定多个属性，使用<code>v-bind=&#123;&#125;</code>结构来实现</p>
<h4 id="三-vue中v-if和v-show有什么区别"><a href="#三-vue中v-if和v-show有什么区别" class="headerlink" title="三. vue中v-if和v-show有什么区别"></a>三. vue中v-if和v-show有什么区别</h4><p><code>v-if</code> 的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, <code>频繁显示隐藏不建议使用</code><br><code>v-show</code> 是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式<code>display</code>为<code>block</code>和<code>none</code>来实现, <code>适用于频繁显示隐藏</code>的情况</p>
<h4 id="四-vue循环中为什么使用key"><a href="#四-vue循环中为什么使用key" class="headerlink" title="四. vue循环中为什么使用key?"></a>四. vue循环中为什么使用key?</h4><p>需要使用<code>key</code>来给循环中每个节点做一个<code>唯一标识</code>，要保证一个循环中<code>key</code>的值各不相同, 以避免vue中的<code>重用机制</code>造成可能的<code>渲染异常</code>.  从底层来看, <code>key</code>属性主要为了<code>Diff算法</code>就可以正确的识别此节点。并<code>高效的更新虚拟DOM</code>。</p>
<h4 id="五-vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？"><a href="#五-vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？" class="headerlink" title="五. vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？"></a>五. vue中数据绑定是怎么实现的？双向绑定指令<code>v-model</code>的本质是什么？</h4><p>Vue组件<code>data</code>中的数据在组件创建时，都会被<code>Object.defineProperty</code>改造为<code>set</code>,<code>get</code>类型的属性，当数据发生变化时<code>set</code>方法就会调用，<code>set</code>方法中添加了重新渲染的代码。<br><code>v-model</code>相当于 <code>v-bind:value</code>  加 <code>v-on:input</code></p>
<h4 id="六-分别简述computed和watch的使用场景"><a href="#六-分别简述computed和watch的使用场景" class="headerlink" title="六. 分别简述computed和watch的使用场景"></a>六. 分别简述computed和watch的使用场景</h4><ul>
<li><code>computed</code>:<br>　　　　当一个属性受多个属性影响的时候就需要用到computed<br>　　　　例子： 购物车商品结算的时候</li>
<li><code>watch</code>:<br>　　　　当一条数据影响多条数据的时候就需要用watch<br>　　　　例子：搜索数据</li>
</ul>
<h4 id="七-列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？"><a href="#七-列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？" class="headerlink" title="七. 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？"></a>七. 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？</h4><p><code>beforeCreate</code>    <code>created</code><br><code>beforeMount</code>     <code>mounted</code><br><code>beforeUpdate</code>    <code>updated</code><br><code>beforeDestroy</code>   <code>destroyed</code><br>当前页面有事件监听器或者计时器时,需要在<code>destroyed</code>中取消或销毁</p>
<h4 id="八-vue的组件配置对象中都有哪些常用字段？分别是什么作用？"><a href="#八-vue的组件配置对象中都有哪些常用字段？分别是什么作用？" class="headerlink" title="八. vue的组件配置对象中都有哪些常用字段？分别是什么作用？"></a>八. vue的组件配置对象中都有哪些常用字段？分别是什么作用？</h4><p><code>Data</code>          组件中的数据<br><code>props</code>         组建的属性数据,接收父组件的传值<br><code>computed</code>      计算属性<br><code>components</code>    定义或引用子组件<br><code>methods</code>       自定义函数<br><code>watch</code>         属性监听<br><code>filters</code>       数据过滤器<br><code>mounted</code>       等生命周期函数</p>
<h4 id="九-lt-keep-alive-gt-lt-x2F-keep-alive-gt-的作用是什么"><a href="#九-lt-keep-alive-gt-lt-x2F-keep-alive-gt-的作用是什么" class="headerlink" title="九. &lt;keep-alive&gt;&lt;&#x2F;keep-alive&gt;的作用是什么?"></a>九. &lt;keep-alive&gt;&lt;&#x2F;keep-alive&gt;的作用是什么?</h4><p><code>keep-alive</code> 是 Vue 内置的一个组件，可以使被包含的组件<code>保留状态</code>，或<code>避免重新渲染</code>。</p>
<h4 id="十-vue组件中如何获取dom元素"><a href="#十-vue组件中如何获取dom元素" class="headerlink" title="十. vue组件中如何获取dom元素?"></a>十. vue组件中如何获取dom元素?</h4><p>使用<code>ref</code>属性获取, 在组件模板元素中添加<code>ref</code>属性, 在js中用<code>this.$refs</code>获取</p>
<h4 id="十一-Vue-nextTick-方法有什么作用？"><a href="#十一-Vue-nextTick-方法有什么作用？" class="headerlink" title="十一. Vue.nextTick()方法有什么作用？"></a>十一. Vue.nextTick()方法有什么作用？</h4><p>当vue中动态数据修改时,会导致界面的更新,而界面的更新属于<code>异步更新</code>, 当打印界面数据时, 异步更新尚未完成, 所以打印结果是更新之前的数据<br><code>Vue.nextTick</code>表示<code>异步更新函数</code>, 其参数是<code>更新完成的回调函数</code></p>
<h4 id="十二-如何让CSS只在当前组件中起作用-vue中如何实现样式隔离-？"><a href="#十二-如何让CSS只在当前组件中起作用-vue中如何实现样式隔离-？" class="headerlink" title="十二. 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？"></a>十二. 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？</h4><p>在组件中的style前面加上<code>scoped</code>, 如果父子组件都有样式隔离, 则父组件中无法修改子组件样式, 此时可用样式穿透修改<br>vue2: 父组件选择器<code>&gt;&gt;&gt;</code>子组件选择器{子组件样式}<br>vue3:  <code>:deep</code>(子组件选择器)</p>
<h4 id="十三-vue中如何处理跨域请求"><a href="#十三-vue中如何处理跨域请求" class="headerlink" title="十三.  vue中如何处理跨域请求"></a>十三.  vue中如何处理跨域请求</h4><p>vue中处理跨域请求一般要设置代理服务器实现跨域,<br>在vue项目的根目录中的<code>vue.config.js</code>配置文件,在<code>devServer</code>字段中配置服务器代理<br>在使用<code>axios</code>请求数据时直接使用代理地址    </p>
<h4 id="十四-axios和ajax的区别："><a href="#十四-axios和ajax的区别：" class="headerlink" title="十四. axios和ajax的区别："></a>十四. axios和ajax的区别：</h4><p><code>axios</code>是通过<code>promise</code>实现对<code>ajax</code>技术的一种封装，就像<code>jQuery</code>实现<code>ajax</code>封装一样。<br>简单来说： <code>ajax</code>技术实现了网页的局部数据刷新，<code>axios</code>实现了对<code>ajax</code>的封装。 </p>
<h4 id="十五-vue中有哪些数据传递方式"><a href="#十五-vue中有哪些数据传递方式" class="headerlink" title="十五. vue中有哪些数据传递方式?"></a>十五. vue中有哪些数据传递方式?</h4><ol>
<li><code>组件传值</code>: 父传子,通过<code>props</code>属性或<code>slot</code>插槽传递,  子传父,通过<code>$emit</code>发射自定义事件传递, 非父子,通过<code>bus</code>总线传递</li>
<li><code>路由传值</code>: 可通过<code>url路径传值</code>和<code>编程式导航对象传值</code></li>
<li><code>vuex状态管理传值</code></li>
</ol>
<h4 id="十六-vue中路由如何传值"><a href="#十六-vue中路由如何传值" class="headerlink" title="十六. vue中路由如何传值?"></a>十六. vue中路由如何传值?</h4><ol>
<li>使用url拼接字符串的形式传值      使用<code>$route.query</code>接收</li>
<li>使用友好URL传值                   使用<code>$route.params</code>接收</li>
<li>使用命名路由<code>params</code>字段传值     使用<code>$route.params</code>接收</li>
<li>使用<code>query</code>对象传值                使用<code>$route.query</code>接收</li>
</ol>
<h4 id="十七-vue组件中如何监听路由"><a href="#十七-vue组件中如何监听路由" class="headerlink" title="十七. vue组件中如何监听路由?"></a>十七. vue组件中如何监听路由?</h4><p>在组件的watch监听器中对<code>$route</code>这个字段进行监听<br>全局监听路由在<code>app.vue</code>组件<br><code>watch</code>监听<code>$route</code>可以监听全局路由，也可以在全局路由守卫<code>beforeEach</code>函数中操作全局路由</p>
<h4 id="十八-vue路由的钩子函数有哪些"><a href="#十八-vue路由的钩子函数有哪些" class="headerlink" title="十八. vue路由的钩子函数有哪些?"></a>十八. vue路由的钩子函数有哪些?</h4><p>全局的路由钩子函数：<code>beforeEach</code>、<code>afterEach</code><br>单个的路由钩子函数：<code>beforeEnter</code><br>组件内的路由钩子函数：<code>beforeRouteEnter</code>、<code>beforeRouteLeave</code>、<code>beforeRouteUpdate</code></p>
<h4 id="十九-介绍以下vue组件内的路由守卫-即路由的生命周期-x2F-钩子函数-，有哪些参数（to，from，next）"><a href="#十九-介绍以下vue组件内的路由守卫-即路由的生命周期-x2F-钩子函数-，有哪些参数（to，from，next）" class="headerlink" title="十九. 介绍以下vue组件内的路由守卫(即路由的生命周期&#x2F;钩子函数)，有哪些参数（to，from，next）"></a>十九. 介绍以下vue组件内的路由守卫(即路由的生命周期&#x2F;钩子函数)，有哪些参数（to，from，next）</h4><p>vue组件中的路由钩子方法有<br><code>beforeRouteEnter</code>    进入路由前调用。这里组件还未创建, 不能使用this<br><code>beforeRouteUpdate</code>  路由更新之前被调用, 组件不会重新初始化, 可以使用this<br><code>beforeRouteLeave</code>  离开路由之前被调用，可以访问里面的this属性<br>方法中都有三个参数:<br><code>to</code> :即将要进入的目标路由对象；<br><code>from</code> :当前导航即将要离开的路由对象；<br><code>next</code> ：调用该方法后，才能进入下一个路由钩子函数</p>
<h4 id="二十-vue中怎么实现非父子组件之间的传值？"><a href="#二十-vue中怎么实现非父子组件之间的传值？" class="headerlink" title="二十. vue中怎么实现非父子组件之间的传值？"></a>二十. vue中怎么实现非父子组件之间的传值？</h4><p>在项目规模不是特别大时，可以创建一个空组件作为<code>总线</code>，项目中其他组件都可以通过<code>总线</code>进行传值。<br>大大型项目中，可以使用<code>vuex</code>进行数据管理，将数据统一放在<code>store</code>中进行管理。<br>也可以在路由跳转时,通过<code>路由传值</code></p>
<h4 id="二十一-vue中如何实现父子组件间的双向数据绑定"><a href="#二十一-vue中如何实现父子组件间的双向数据绑定" class="headerlink" title="二十一. vue中如何实现父子组件间的双向数据绑定?"></a>二十一. vue中如何实现父子组件间的双向数据绑定?</h4><p>Vue中父子组件双向绑定利用父子组件传值原理,<br>父组件向子组件传值, 通过给子组件定义<code>value</code>属性来接收传值<br>子组件向父组件传值, 通过子组件<code>$emit</code>发射名为<code>input</code>的自定义事件<br>在父组件中使用子组件标签时, 在子组件标签上通过<code>v-model</code>绑定父组件数据,实现父子组件的双向绑定</p>
<h4 id="二十二-vuex如何使用"><a href="#二十二-vuex如何使用" class="headerlink" title="二十二. vuex如何使用?"></a>二十二. vuex如何使用?</h4><p>首先在项目中 <code>npm install vuex</code> 安装<br>新建<code>vuex</code>状态管理文件,导入<code>vuex</code>并添加状态数据<br>在组件中使用<code>mapState()</code>函数映射状态数据并使用<br>在组件中使用<code>commit()</code>函数提交申请修改状态数据</p>
<h4 id="二十三-Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？"><a href="#二十三-Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？" class="headerlink" title="二十三. Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？"></a>二十三. Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？</h4><p><code>state</code> &#x3D;&gt; 基本数据      在组件中使用<code>mapState()</code>函数把状态数据映射入组件即可使用<br><code>getters</code> &#x3D;&gt; 从基本数据派生的数据   我们在组件中使用 <code>$store.getters</code>获取数据<br><code>mutations</code> &#x3D;&gt; 提交更改数据的方法，同步！    我们在组件中使用 <code>$store.commit(&#39;&#39;,params)</code>修改数据<br><code>actions</code> &#x3D;&gt; 像一个装饰器，包裹<code>mutations</code>，使之可以异步。  使用<code>mapAction()</code>映射入组件使用<br><code>modules</code> &#x3D;&gt; 模块化<code>Vuex</code></p>
<h4 id="二十四-vue有哪些常用的UI组件库"><a href="#二十四-vue有哪些常用的UI组件库" class="headerlink" title="二十四. vue有哪些常用的UI组件库"></a>二十四. vue有哪些常用的UI组件库</h4><p><code>element</code> (PC端)，<br><code>VUX</code> (移动端),<br><code>Mint UI</code>(移动端)<br><code>Vant</code> (移动端)</p>
<h4 id="二十五-vue有哪些优缺点"><a href="#二十五-vue有哪些优缺点" class="headerlink" title="二十五. vue有哪些优缺点:"></a>二十五. vue有哪些优缺点:</h4><p>优点: </p>
<ol>
<li><code>简单好用</code>： <code>Vue.js</code>包含基于<code>HTML</code>的标准模板，可以更轻松地使用和修改现有应用程序。</li>
<li>单页面应用, 使用单文件组件结构, 用户体验好, </li>
<li><code>性能比较好</code>：相比其他框架, 它占用更少的空间，并提供更好的性能。</li>
<li><code>基于MVVM模式</code>, 数据驱动视图, 更高效</li>
<li><code>适应性强</code>：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性</li>
</ol>
<p>缺点: </p>
<ol>
<li>vue生态环境不如<code>react</code>和<code>angular</code>, 但有追赶和超越的趋势</li>
<li>vue2不支持IE8   vue3 不支持IE10</li>
<li>vue封装的比较深入,<code>不利于seo优化</code>, <code>报错不明显</code></li>
</ol>
<h4 id="二十六-什么是MVVM"><a href="#二十六-什么是MVVM" class="headerlink" title="二十六. 什么是MVVM?"></a>二十六. 什么是MVVM?</h4><p><code>MVVM</code>是<code>model-view-viewModel</code>的简写, 它是一种<code>开发模式</code>, 它实现了<code>视图</code>和<code>数据逻辑</code>之间的<code>分离</code>,  <code>model</code>模型指的是后端传递的数据, <code>view</code>视图指的是所看到的页面, <code>viewModel</code>是连接视图<code>view</code>和模型<code>model</code>的桥梁, 从而实现模型<code>model</code>到视图<code>view</code>的转化 和 视图<code>view</code>到模型<code>model</code>的转化, 也就是我们所说的<code>双向数据绑定</code>, 使用<code>MVVM</code>模式实现的前端框架有 <code>vue</code> 和 <code>react</code></p>
<h4 id="二十七-vue项目怎么打包app"><a href="#二十七-vue项目怎么打包app" class="headerlink" title="二十七. vue项目怎么打包app  ?"></a>二十七. vue项目怎么打包app  ?</h4><ol>
<li>首先使用 <code>webpack</code> 打发布包, <code>npm run build</code></li>
<li>然后通过 <code>Hbuilder</code> 新建<code>H5+App项目</code></li>
<li>把第一步打包出的dist文件夹导入项目</li>
<li>在项目中的<code>manifest.json</code>文件中进行打包配置</li>
<li>点击<code>Hbuilder</code>工具菜单栏发行中的 <code>原生App-云打包</code></li>
</ol>
<h4 id="二十八-vue中虚拟DOM的实现原理"><a href="#二十八-vue中虚拟DOM的实现原理" class="headerlink" title="二十八. vue中虚拟DOM的实现原理"></a>二十八. vue中虚拟DOM的实现原理</h4><p><code>虚拟DOM</code>是通过js对象的结构来记录html标签节点, 当组件数据更新需要渲染视图时,先用<code>diff算法</code>计算变化前后js对象(也就是<code>虚拟DOM树</code>)结构的不同, 得到最小差异, 然后针对性的更新部分真实DOM节点, 这样可以极大<code>提高视图渲染效率</code>, <code>节省内存消耗</code></p>
<h4 id="二十九-请说下封装-vue-组件的过程？"><a href="#二十九-请说下封装-vue-组件的过程？" class="headerlink" title="二十九. 请说下封装 vue 组件的过程？"></a>二十九. 请说下封装 vue 组件的过程？</h4><ol>
<li>建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(思考1小时，码码10分钟，程序猿的准则。)</li>
<li>准备好组件的数据输入。即分析好逻辑，定好 <code>props</code> 里面的数据、类型。</li>
<li>准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。</li>
<li>封装完毕了，直接调用即可</li>
</ol>
<h4 id="三十-在vue项目中使用组件库-如何修改组件库中组件的样式"><a href="#三十-在vue项目中使用组件库-如何修改组件库中组件的样式" class="headerlink" title="三十. 在vue项目中使用组件库, 如何修改组件库中组件的样式?"></a>三十. 在vue项目中使用组件库, 如何修改组件库中组件的样式?</h4><p>一般vue组件<code>style</code>会添加<code>scoped</code>属性,产生组件样式隔离, 无法直接修改子组件样式<br>此时可以使用vue提供的样式穿透语法修改子组件样式 (父组件选择器 <code>&gt;&gt;&gt;</code> 子组件选择器  vue3是 <code>:deep()</code>)</p>
<h4 id="三十一-vue项目中如何使用sass"><a href="#三十一-vue项目中如何使用sass" class="headerlink" title="三十一. vue项目中如何使用sass?"></a>三十一. vue项目中如何使用sass?</h4><ol>
<li>下载安装<code>sass</code>模块   <code>npm install sass --save</code></li>
<li>在组件的<code>style</code>标签上添加<code>lang=”scss”</code></li>
</ol>
<h4 id="32-SCSS-x2F-less相比于CSS有哪些优势？"><a href="#32-SCSS-x2F-less相比于CSS有哪些优势？" class="headerlink" title="32. SCSS&#x2F;less相比于CSS有哪些优势？"></a>32. SCSS&#x2F;less相比于CSS有哪些优势？</h4><p>在css语法基础上添加了编程能力，使之具有定义变量，嵌套，计算，使用函数,混合等功能</p>
<h4 id="33-scss和less有哪些不同？"><a href="#33-scss和less有哪些不同？" class="headerlink" title="33. scss和less有哪些不同？"></a>33. scss和less有哪些不同？</h4><ol>
<li>编译环境不同 <code>sass-loader</code>   <code>less-loader</code></li>
<li><code>scss</code>变量使用$定义 ,<code>less</code>变量使用@定义</li>
<li><code>sass</code>支持条件语句,可以使用<code>if()</code> <code>else()</code> <code>for()</code>, <code>less</code>不支持</li>
</ol>
<h4 id="34-vue单文件组件如何实现SEO优化-了解-？"><a href="#34-vue单文件组件如何实现SEO优化-了解-？" class="headerlink" title="34. vue单文件组件如何实现SEO优化(了解)？"></a>34. vue单文件组件如何实现SEO优化(了解)？</h4><ol>
<li>使用预渲染插件<code>prerender-spa-plugin</code>,来执行打包,可以把项目中的每一个页面打包成一个网页，之后可单独实现SEO优化</li>
<li>使用后端模板化渲染页面,也叫<code>SSR</code>服务器渲染</li>
<li>使用<code>Nuxt.js</code>插件执行静态化打包</li>
<li>使用<code>Phantomjs</code>无头浏览器(只有浏览器内核,没有界面)</li>
</ol>
<h4 id="35-vue3相比于vue2有哪些区别？"><a href="#35-vue3相比于vue2有哪些区别？" class="headerlink" title="35. vue3相比于vue2有哪些区别？"></a>35. vue3相比于vue2有哪些区别？</h4><ol>
<li>vue2使用时直接导入vue构造函数,vue3使用时通过对象解构方式按需导入</li>
<li>vue3中新增了<code>setup</code>函数，数据的定义，更新计算，监听等都在<code>setup</code>函数中执行</li>
<li><code>setup</code>函数中的数据都需要<code>return</code>导出才能在组件模板中调用</li>
<li><code>Setup</code>中<code>this</code>为空,可以有效避免<code>this</code>指向修改带来的问题</li>
<li>Vue中的生命周期也在<code>setup</code>中实现，其中取消了<code>beforeCreata</code>和<code>created</code>,其他的生命周期函数名有更新,如<code>destoryed</code>改成了<code>onUnmounted</code></li>
<li>Vue3中使用<code>ref</code>函数定义值类型数据,使用<code>reactive</code>函数定义引用类型数据</li>
<li>Vue3中的<code>ref</code>, <code>reactive</code>,<code>computed</code>等功能函数都需要从vue中解构导出才能使用</li>
<li>Vue3废弃了<code>filters</code>过滤器,建议使用<code>计算属性</code></li>
<li>vue3中的样式隔离由 <code>&gt;&gt;&gt;</code> 或 <code>/deep/</code>  改成了 <code>:deep()</code></li>
<li>vue3可以动态绑定样式, 在<code>style</code>中使用<code>v-bind()</code> 绑定响应数据</li>
</ol>
<h4 id="36-vue3语法糖-x2F-setup中如何使用状态管理vuex和-路由"><a href="#36-vue3语法糖-x2F-setup中如何使用状态管理vuex和-路由" class="headerlink" title="36. vue3语法糖&#x2F;setup中如何使用状态管理vuex和 路由 ?"></a>36. vue3语法糖&#x2F;setup中如何使用状态管理vuex和 路由 ?</h4><p>从<code>vuex</code>模块中引入 <code>useStore</code> 函数, 调用后得到 状态仓库对象<code>store</code><br>从<code>vue-router</code>模块中引入 <code>useRoute</code>和<code>useRouter</code>函数,<br>调用<code>useRoute()</code>后得到路由信息对象<code>route</code>, 可用于<code>路由传值</code>和<code>路由监听</code><br>调用<code>useRouter()</code>后得到路由配置对象<code>router</code>, 可用于<code>路由跳转</code></p>

        </article>

        
            
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>咔斯Sama<br>
    
    <strong>本文链接：</strong><a href="https://blog.kassama.top/webNotes-VueInterview.html" title="https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-VueInterview.html" target="_blank" rel="noopener">https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes-VueInterview.html</a><br>

    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


        

        <div class="nexmoe-post-meta nexmoe-rainbow">
    
        <a class="nexmoefont icon-appstore-fill -link" href="/categories/web%E7%AC%94%E8%AE%B0/">web笔记</a>
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/HTML/" rel="tag">HTML</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/Vue/" rel="tag">Vue</a>
    
</div>

    <div class="nexmoe-post-footer">
        <section class="nexmoe-comment">
    <!-- <div class="valine ks-valine-box"></div> -->
<script src='https://lib.baomitu.com/valine/1.5.1/Valine.min.js'></script>
<script>
    // 使用方法 https://valine.js.org/quickstart.html
    new Valine({
        el: '.valine',
        appId: '6Om9oV6sycmCPkRcrF9VR7Vd-gzGzoHsz',
        appKey: 'cas3l5T4L8EkjrOFGsfzD8vM',
        enableQQ: true,
        placeholder: '阁下要说点什么嘛！',
        requiredFields:['nick','mail'],

        emojiCDN: '//cdn.bilicdn.tk/gh/kasisama/ValineCDN@master/',
        // 表情title和图片映射
        emojiMaps: {
            "bilibilitv2": "bilibilitv/[tv_doge].png",
            "bilibilitv3": "bilibilitv/[tv_亲亲].png",
            "bilibilitv4": "bilibilitv/[tv_偷笑].png",
            "bilibilitv5": "bilibilitv/[tv_再见].png",
            "bilibilitv6": "bilibilitv/[tv_冷漠].png",
            "bilibilitv7": "bilibilitv/[tv_发怒].png",
            "bilibilitv8": "bilibilitv/[tv_发财].png",
            "bilibilitv9": "bilibilitv/[tv_可爱].png",
            "bilibilitv10": "bilibilitv/[tv_吐血].png",
            "bilibilitv11": "bilibilitv/[tv_呆].png",
            "bilibilitv12": "bilibilitv/[tv_呕吐].png",
            "bilibilitv13": "bilibilitv/[tv_困].png",
            "bilibilitv14": "bilibilitv/[tv_坏笑].png",
            "bilibilitv15": "bilibilitv/[tv_大佬].png",
            "bilibilitv16": "bilibilitv/[tv_大哭].png",
            "bilibilitv17": "bilibilitv/[tv_委屈].png",
            "bilibilitv18": "bilibilitv/[tv_害羞].png",
            "bilibilitv19": "bilibilitv/[tv_尴尬].png",
            "bilibilitv20": "bilibilitv/[tv_微笑].png",
            "bilibilitv21": "bilibilitv/[tv_思考].png",
            "bilibilitv22": "bilibilitv/[tv_惊吓].png",
            "bilibilitv23": "bilibilitv/[tv_打脸].png",
            "bilibilitv24": "bilibilitv/[tv_抓狂].png",
            "bilibilitv25": "bilibilitv/[tv_抠鼻].png",
            "bilibilitv26": "bilibilitv/[tv_斜眼笑].png",
            "bilibilitv27": "bilibilitv/[tv_无奈].png",
            "bilibilitv28": "bilibilitv/[tv_晕].png",
            "bilibilitv29": "bilibilitv/[tv_流汗].png",
            "bilibilitv30": "bilibilitv/[tv_流泪].png",
            "bilibilitv31": "bilibilitv/[tv_流鼻血].png",
            "bilibilitv32": "bilibilitv/[tv_点赞].png",
            "bilibilitv33": "bilibilitv/[tv_生气].png",
            "bilibilitv34": "bilibilitv/[tv_生病].png",
            "bilibilitv35": "bilibilitv/[tv_疑问].png",
            "bilibilitv36": "bilibilitv/[tv_白眼].png",
            "bilibilitv37": "bilibilitv/[tv_皱眉].png",
            "bilibilitv38": "bilibilitv/[tv_目瞪口呆].png",
            "bilibilitv39": "bilibilitv/[tv_睡着].png",
            "bilibilitv40": "bilibilitv/[tv_笑哭].png",
            "bilibilitv41": "bilibilitv/[tv_腼腆].png",
            "bilibilitv42": "bilibilitv/[tv_色].png",
            "bilibilitv43": "bilibilitv/[tv_调侃].png",
            "bilibilitv44": "bilibilitv/[tv_调皮].png",
            "bilibilitv45": "bilibilitv/[tv_鄙视].png",
            "bilibilitv46": "bilibilitv/[tv_闭嘴].png",
            "bilibilitv47": "bilibilitv/[tv_难过].png",
            "bilibilitv48": "bilibilitv/[tv_馋].png",
            "bilibilitv49": "bilibilitv/[tv_鬼脸].png",
            "bilibilitv50": "bilibilitv/[tv_黑人问号].png",
            "bilibilitv51": "bilibilitv/[tv_鼓掌].png",
            "Heybox1": "Heybox/expression_cube.png",
            "Heybox2": "Heybox/expression_cube_bingbujiandan.png",
            "Heybox3": "Heybox/expression_cube_bizui.png",
            "Heybox4": "Heybox/expression_cube_cangsang.png",
            "Heybox5": "Heybox/expression_cube_dalian.png",
            "Heybox6": "Heybox/expression_cube_doge.png",
            "Heybox7": "Heybox/expression_cube_gandong.png",
            "Heybox8": "Heybox/expression_cube_guai.png",
            "Heybox9": "Heybox/expression_cube_gugu.png",
            "Heybox10": "Heybox/expression_cube_han.png",
            "Heybox11": "Heybox/expression_cube_hbi.png",
            "Heybox12": "Heybox/expression_cube_heirenwenhao.png",
            "Heybox13": "Heybox/expression_cube_huaji.png",
            "Heybox14": "Heybox/expression_cube_jiayou.png",
            "Heybox15": "Heybox/expression_cube_jingya.png",
            "Heybox16": "Heybox/expression_cube_kaixin.png",
            "Heybox17": "Heybox/expression_cube_ku.png",
            "Heybox18": "Heybox/expression_cube_kun.png",
            "Heybox19": "Heybox/expression_cube_kuqi.png",
            "Heybox20": "Heybox/expression_cube_nu.png",
            "Heybox21": "Heybox/expression_cube_penshui.png",
            "Heybox22": "Heybox/expression_cube_qiliang.png",
            "Heybox23": "Heybox/expression_cube_shengqi.png",
            "Heybox24": "Heybox/expression_cube_shuijiao.png",
            "Heybox25": "Heybox/expression_cube_tanqi.png",
            "Heybox26": "Heybox/expression_cube_tanshou.png",
            "Heybox27": "Heybox/expression_cube_tu.png",
            "Heybox28": "Heybox/expression_cube_wa.png",
            "Heybox29": "Heybox/expression_cube_weiqu.png",
            "Heybox30": "Heybox/expression_cube_weixiao.png",
            "Heybox31": "Heybox/expression_cube_wulianku.png",
            "Heybox32": "Heybox/expression_cube_xia.png",
            "Heybox33": "Heybox/expression_cube_xiaocry.png",
            "Heybox34": "Heybox/expression_cube_xihuan.png",
            "Heybox35": "Heybox/expression_cube_xuexi.png",
            "Heybox36": "Heybox/expression_cube_yun.png",
            "Heybox37": "Heybox/expression_cube_zan.png"
        }
    })
    
</script>
</section>
    </div>
</div>


        <div class="nexmoe-post-right">
            <div class="nexmoe-fixed">
              <div class="nexmoe-tool">
                
                
                    
                        <button class="mdui-fab catalog" style="overflow:unset;">
                            <i class="nexmoefont icon-i-catalog"></i>
                            <div class="nexmoe-toc">
                              <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%80-%E8%AF%B4%E5%87%A0%E4%B8%AAvue%E4%B8%AD%E7%9A%84%E6%8C%87%E4%BB%A4%E5%92%8C%E5%AE%83%E7%9A%84%E7%94%A8%E6%B3%95%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">一. 说几个vue中的指令和它的用法？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C-v-on%E6%8C%87%E4%BB%A4%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E7%9B%91%E5%90%AC%E5%A4%9A%E4%B8%AA%E5%87%BD%E6%95%B0%E5%90%97"><span class="toc-number">2.</span> <span class="toc-text">二. v-on指令可以同时监听多个函数吗?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89-vue%E4%B8%ADv-if%E5%92%8Cv-show%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">3.</span> <span class="toc-text">三. vue中v-if和v-show有什么区别</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9B%9B-vue%E5%BE%AA%E7%8E%AF%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8key"><span class="toc-number">4.</span> <span class="toc-text">四. vue循环中为什么使用key?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%94-vue%E4%B8%AD%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E6%98%AF%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E7%9A%84%EF%BC%9F%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E6%8C%87%E4%BB%A4v-model%E7%9A%84%E6%9C%AC%E8%B4%A8%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">5.</span> <span class="toc-text">五. vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%AD-%E5%88%86%E5%88%AB%E7%AE%80%E8%BF%B0computed%E5%92%8Cwatch%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">6.</span> <span class="toc-text">六. 分别简述computed和watch的使用场景</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%83-%E5%88%97%E4%B8%BE%E4%B8%80%E4%B8%8BVue%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E9%9C%80%E8%A6%81%E5%9C%A8destroyed%E4%B8%AD%E5%86%99%E4%BB%A3%E7%A0%81%EF%BC%9F"><span class="toc-number">7.</span> <span class="toc-text">七. 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%AB-vue%E7%9A%84%E7%BB%84%E4%BB%B6%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1%E4%B8%AD%E9%83%BD%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E7%94%A8%E5%AD%97%E6%AE%B5%EF%BC%9F%E5%88%86%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8%EF%BC%9F"><span class="toc-number">8.</span> <span class="toc-text">八. vue的组件配置对象中都有哪些常用字段？分别是什么作用？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B9%9D-lt-keep-alive-gt-lt-x2F-keep-alive-gt-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">9.</span> <span class="toc-text">九. &lt;keep-alive&gt;&lt;&#x2F;keep-alive&gt;的作用是什么?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81-vue%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96dom%E5%85%83%E7%B4%A0"><span class="toc-number">10.</span> <span class="toc-text">十. vue组件中如何获取dom元素?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%B8%80-Vue-nextTick-%E6%96%B9%E6%B3%95%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8%EF%BC%9F"><span class="toc-number">11.</span> <span class="toc-text">十一. Vue.nextTick()方法有什么作用？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%BA%8C-%E5%A6%82%E4%BD%95%E8%AE%A9CSS%E5%8F%AA%E5%9C%A8%E5%BD%93%E5%89%8D%E7%BB%84%E4%BB%B6%E4%B8%AD%E8%B5%B7%E4%BD%9C%E7%94%A8-vue%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB-%EF%BC%9F"><span class="toc-number">12.</span> <span class="toc-text">十二. 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%B8%89-vue%E4%B8%AD%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82"><span class="toc-number">13.</span> <span class="toc-text">十三.  vue中如何处理跨域请求</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E5%9B%9B-axios%E5%92%8Cajax%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9A"><span class="toc-number">14.</span> <span class="toc-text">十四. axios和ajax的区别：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%BA%94-vue%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92%E6%96%B9%E5%BC%8F"><span class="toc-number">15.</span> <span class="toc-text">十五. vue中有哪些数据传递方式?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E5%85%AD-vue%E4%B8%AD%E8%B7%AF%E7%94%B1%E5%A6%82%E4%BD%95%E4%BC%A0%E5%80%BC"><span class="toc-number">16.</span> <span class="toc-text">十六. vue中路由如何传值?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%B8%83-vue%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E8%B7%AF%E7%94%B1"><span class="toc-number">17.</span> <span class="toc-text">十七. vue组件中如何监听路由?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E5%85%AB-vue%E8%B7%AF%E7%94%B1%E7%9A%84%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">18.</span> <span class="toc-text">十八. vue路由的钩子函数有哪些?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8D%81%E4%B9%9D-%E4%BB%8B%E7%BB%8D%E4%BB%A5%E4%B8%8Bvue%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB-%E5%8D%B3%E8%B7%AF%E7%94%B1%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F-x2F-%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0-%EF%BC%8C%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8F%82%E6%95%B0%EF%BC%88to%EF%BC%8Cfrom%EF%BC%8Cnext%EF%BC%89"><span class="toc-number">19.</span> <span class="toc-text">十九. 介绍以下vue组件内的路由守卫(即路由的生命周期&#x2F;钩子函数)，有哪些参数（to，from，next）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81-vue%E4%B8%AD%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BC%A0%E5%80%BC%EF%BC%9F"><span class="toc-number">20.</span> <span class="toc-text">二十. vue中怎么实现非父子组件之间的传值？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%B8%80-vue%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%97%B4%E7%9A%84%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="toc-number">21.</span> <span class="toc-text">二十一. vue中如何实现父子组件间的双向数据绑定?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%BA%8C-vuex%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8"><span class="toc-number">22.</span> <span class="toc-text">二十二. vuex如何使用?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%B8%89-Vuex%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8store%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98store%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9F"><span class="toc-number">23.</span> <span class="toc-text">二十三. Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E5%9B%9B-vue%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E7%94%A8%E7%9A%84UI%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="toc-number">24.</span> <span class="toc-text">二十四. vue有哪些常用的UI组件库</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%BA%94-vue%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%98%E7%BC%BA%E7%82%B9"><span class="toc-number">25.</span> <span class="toc-text">二十五. vue有哪些优缺点:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E5%85%AD-%E4%BB%80%E4%B9%88%E6%98%AFMVVM"><span class="toc-number">26.</span> <span class="toc-text">二十六. 什么是MVVM?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%B8%83-vue%E9%A1%B9%E7%9B%AE%E6%80%8E%E4%B9%88%E6%89%93%E5%8C%85app"><span class="toc-number">27.</span> <span class="toc-text">二十七. vue项目怎么打包app  ?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E5%85%AB-vue%E4%B8%AD%E8%99%9A%E6%8B%9FDOM%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">28.</span> <span class="toc-text">二十八. vue中虚拟DOM的实现原理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81%E4%B9%9D-%E8%AF%B7%E8%AF%B4%E4%B8%8B%E5%B0%81%E8%A3%85-vue-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E7%A8%8B%EF%BC%9F"><span class="toc-number">29.</span> <span class="toc-text">二十九. 请说下封装 vue 组件的过程？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E5%8D%81-%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%BA%93-%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%BA%93%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B7%E5%BC%8F"><span class="toc-number">30.</span> <span class="toc-text">三十. 在vue项目中使用组件库, 如何修改组件库中组件的样式?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E5%8D%81%E4%B8%80-vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8sass"><span class="toc-number">31.</span> <span class="toc-text">三十一. vue项目中如何使用sass?</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#32-SCSS-x2F-less%E7%9B%B8%E6%AF%94%E4%BA%8ECSS%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%98%E5%8A%BF%EF%BC%9F"><span class="toc-number">32.</span> <span class="toc-text">32. SCSS&#x2F;less相比于CSS有哪些优势？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#33-scss%E5%92%8Cless%E6%9C%89%E5%93%AA%E4%BA%9B%E4%B8%8D%E5%90%8C%EF%BC%9F"><span class="toc-number">33.</span> <span class="toc-text">33. scss和less有哪些不同？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#34-vue%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0SEO%E4%BC%98%E5%8C%96-%E4%BA%86%E8%A7%A3-%EF%BC%9F"><span class="toc-number">34.</span> <span class="toc-text">34. vue单文件组件如何实现SEO优化(了解)？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#35-vue3%E7%9B%B8%E6%AF%94%E4%BA%8Evue2%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">35.</span> <span class="toc-text">35. vue3相比于vue2有哪些区别？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#36-vue3%E8%AF%AD%E6%B3%95%E7%B3%96-x2F-setup%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex%E5%92%8C-%E8%B7%AF%E7%94%B1"><span class="toc-number">36.</span> <span class="toc-text">36. vue3语法糖&#x2F;setup中如何使用状态管理vuex和 路由 ?</span></a></li></ol>
                            </div>
                        </button>
                        
                  
                
                  <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                
              </div>
            </div>
        </div>
    </div>
  </div>
  <div id="nexmoe-pendant">
    <div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw #242424;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw rgba(0, 0, 0, 0.8);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh #242424;
            box-shadow: 0 1.4vh 2.8vh rgba(0, 0, 0, 0.8);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard"></div>
    <div class="qweather-logo">

    </div>

</div>
<style>
    .qweather{
        position: relative;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>
<script>
  WIDGET = {
    "CONFIG": {
      "layout": "2",
      "width": "260",
      "height": "220",
      "background": "5",
      "dataColor": "0099FF",
      "borderRadius": "15",
      "key": "06114923535c446ea84c203a5e492a41"
    }
  }
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

            </div>
        
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
</style>

  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


<script src="/js/app.js?v=1695462045625"></script>

<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>

  





<!-- hexo injector body_end start -->
<script src="/js/clock.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/lib/codeBlock/codeBlockFuction.js"></script>

<script src="/lib/codeBlock/codeLang.js"></script>

<script src="/lib/codeBlock/codeCopy.js"></script>

<script src="/lib/codeBlock/codeShrink.js"></script>

<link rel="stylesheet" href="/lib/codeBlock/matery.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<script src="/js/search.js"></script>

<script src="/js/webapp.js"></script>
<!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/rem.model.json"},"display":{"position":"left","width":400,"height":400},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>

<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f90b2d50.js","daovoice")</script>
<script>
  daovoice('init', {
    app_id: "f90b2d50"
  });
  daovoice('update');
</script>

